/**
 * Created by zhangsong on 2019-05-08.
 */

import React, { Component } from 'react';
import { Button, Form, Input } from 'antd';
import { formatMessage } from '@/utils/i18n';
import { connect } from 'dva';
import VehicleReducer from '@/dva/application/vehicles';
import Style from './search.module.scss';

const formStyle = {
  formItem: {
    // labelCol: {
    //   span: 3,
    // },
  },
};

const { actions, namespace } = VehicleReducer;

@connect(
  state => ({
    vehicleStore: state[namespace],
  }),
  dispatch => ({
    handleSearchSubmit: data =>
      dispatch({
        type: actions.listByParam,
        data,
      }),
  }),
)
@Form.create()
class SearchApp extends Component {
  handleClear = () => {
    const { form } = this.props;
    form.setFieldsValue({
      vehicleNumber: undefined,
      make: undefined,
      colour: undefined,
      staffNo: undefined,
      telNo: undefined,
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    const { form } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        const { handleSearchSubmit, vehicleStore } = this.props;
        handleSearchSubmit({
          query: values,
          page: 1,
          pageSize: vehicleStore.pageSize,
        });
      }
    });
  };

  render() {
    const { form, vehicleStore = {} } = this.props;
    const { getFieldDecorator } = form;
    const { query = {} } = vehicleStore;
    return (
      <div className={`${Style.searchFormWrapper}`}>
        <Form layout="inline" onSubmit={this.handleSubmit}>
          <div className="item-wrapper">
            <Form.Item
              {...formStyle.formItem}
              label={formatMessage('applicationVehicle.columns.vehicleNumber.name')}
            >
              {getFieldDecorator('vehicleNumber', {
                initialValue: query.vehicleNumber,
              })(<Input maxLength={50} />)}
            </Form.Item>
          </div>
          <div className="item-wrapper">
            <Form.Item
              {...formStyle.formItem}
              label={formatMessage('applicationVehicle.columns.make.name')}
            >
              {getFieldDecorator('make', {
                initialValue: query.make,
              })(<Input maxLength={50} />)}
            </Form.Item>
          </div>
          <div className="item-wrapper">
            <Form.Item
              {...formStyle.formItem}
              label={formatMessage('applicationVehicle.columns.colour.name')}
            >
              {getFieldDecorator('colour', {
                initialValue: query.colour,
              })(<Input maxLength={50} />)}
            </Form.Item>
          </div>
          <div className="item-wrapper">
            <Form.Item
              {...formStyle.formItem}
              label={formatMessage('applicationVehicle.columns.staffNo.name')}
            >
              {getFieldDecorator('staffNo', {
                initialValue: query.staffNo,
              })(<Input maxLength={50} />)}
            </Form.Item>
          </div>
          {/* <div className="item-wrapper"> */}
          {/*  <Form.Item */}
          {/*    {...formStyle.formItem} */}
          {/*    label={formatMessage('applicationVehicle.columns.expiryDate.name')} */}
          {/*  > */}
          {/*    {getFieldDecorator('expiryDate', {})( */}
          {/*      <DatePicker format="D/M/YYYY" />, */}
          {/*    )} */}
          {/*  </Form.Item> */}
          {/* </div> */}
          <div className="item-wrapper">
            <Form.Item
              {...formStyle.formItem}
              label={formatMessage('applicationVehicle.columns.telNo.name')}
            >
              {getFieldDecorator('telNo', {
                initialValue: query.telNo,
              })(<Input maxLength={50} />)}
            </Form.Item>
          </div>
          <div className="item-wrapper search-button">
            <Button htmlType="button" onClick={this.handleClear}>
              {formatMessage('button.clear')}
            </Button>
            <Button type="primary" htmlType="submit" icon="search">
              {formatMessage('button.search')}
            </Button>
          </div>
        </Form>
      </div>
    );
  }
}

export default SearchApp;
